<template>
	<view class="success-state-wrap">
		<u-image src="/order/static/icon/b1.png" width="80rpx" height="80rpx"></u-image>
		<view class="state">下单成功</view>
		<view class="state-tip">我们尽快为您发货</view>
		<view class="btns-wrap">
			<view><u-button shape="circle" plain color="#05C160" throttleTime="1000">查看订单</u-button></view>
			<view><u-button color="#05C160" shape="circle" throttleTime="1000">再下一单</u-button></view>
		</view>
	</view>
	<view class="suggest-box">
		<view class="title-box">
			<view class="title">推荐</view>
			<view class="point"></view>
			<view class="title">推荐</view>
		</view>
		<view class="waterfull">
			<WaterfullModel></WaterfullModel>
		</view>
	</view>
</template>

<script setup lang="ts">
	import WaterfullModel from '@/components/WaterfallModel/index.vue'
</script>

<style lang="scss" scoped>
	.success-state-wrap {
		padding: 78rpx 88rpx 55rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-bottom: 1rpx solid #C1C1C1;
		.state {
			font-size: 32rpx;
			font-weight: bold;
			color: #353535;
			margin-top: 26rpx;
		}
		.state-tip {
			margin-top: 26rpx;
			font-weight: 400;
			color: #565656;
		}
		.btns-wrap {
			@include flex-between(100%);
			margin-top: 46rpx;
			& > view {
				width: 254rpx;
			}
		}
	}
	.suggest-box {
		padding-bottom: 150rpx;
		margin-top: 48rpx;
		.title-box {
			@include flex-center(100%);
			.title {
				font-size: 32rpx;
				color: #000000;
			}
			.point {
				margin: 0 12rpx;
				width: 8rpx;
				height: 8rpx;
				background: #05C160;
				border-radius: 50%;
			}
		}
	}
	.waterfull {
		margin-top: 46rpx;
	}
</style>
